<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>RuleAct V3 控制面板</title>
    <style>
        body { font-family: Arial, sans-serif; min-width: 250px; padding: 15px; }
        h3 { margin-top: 0; border-bottom: 1px solid #ddd; padding-bottom: 8px; }
        .control-group { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
        #statusLabel { font-weight: bold; margin-left: 15px; width: 60px; text-align: right; }

        /* ----------------------- 核心滑块样式 ----------------------- */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px; /* 宽度 */
            height: 24px; /* 高度 */
            cursor: pointer;
        }

        .slider {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc; /* 禁用状态背景 */
            transition: .4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 18px; /* 滑块高度 */
            width: 18px;  /* 滑块宽度 */
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }

        /* 启用状态 */
        .switch.on .slider {
            background-color: #2196F3;
        }

        .switch.on .slider:before {
            transform: translateX(26px); /* 移动距离: (宽度 - 高度) + (左侧内边距*2) */
        }

    </style>
</head>
<body>
<h3>RuleAct V3 全局控制</h3>
<div class="control-group">
    <label>全局开关：</label>
    <div style="display: flex; align-items: center;">
        <div id="globalToggle" class="switch">
            <span class="slider"></span>
        </div>
        <span id="statusLabel">状态加载中...</span>
    </div>
</div>
<script src="popup.js"></script>
</body>
</html>